<template>
  <div class="message">
    <!-- <div class="btnList">
      <el-button @click="allDelete">全部删除</el-button>
      <el-button @click="allRead">全部已读</el-button>
    </div> -->
    <el-table
      :data="list"
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="title" :label="$t('title')" align="center">
      </el-table-column>
      <el-table-column
        prop="content"
        :label="$t('content')"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ scope.row.content }}
        </template>
      </el-table-column>
      <el-table-column prop="datetime" :label="$t('date')" align="center">
        <template slot-scope="scope">
          {{ getTimes(scope.row.datetime) }}
        </template>
      </el-table-column>
      <!-- <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" style="background: #ccc"
            >删除</el-button
          >
        </template>
      </el-table-column> -->
    </el-table>
  </div>
</template>
<script>
import { httpNoticeList } from "@/http/api";
import { getTimes } from "@/utils/common";
export default {
  name: "message",
  data() {
    return {
      list: [],
      showReceive: false,
      listLoading: false,
      listAjax: false,
      diamond: [],
      pages: {
        // 分页信息
        page: 1,
        total: 0,
        total_page: 0,
        nodata: false,
      },
      popupObj: {},
    };
  },
  created() {
    sessionStorage.setItem("SMessage", true);
    this.onLoadList();
  },
  methods: {
    getTimes,
    tableRowClassName({ row }) {
      if (row.is_receive === 0) {
        return "warning-row";
      } else if (row.is_receive === 1) {
        return "success-row";
      }
      return "";
    },
    allDelete() {},
    allRead() {},
    async getHttpNoticeList(flag) {
      if (this.listAjax) return;
      let params = {
        page: this.pages.page,
      };
      this.listAjax = true;
      let res = await httpNoticeList(params);
      this.listAjax = false;
      this.listLoading = false;
      if (res.code === 10001) {
        return this.$router.push("/register");
      }
      if (res.code == 0) {
        if (flag) {
          this.list = [...res.data.list];
        } else {
          this.list = [...this.list, ...res.data.list];
        }
        this.pages.total = res.data.page.total_count;
        this.pages.total_page = res.data.page.total_page;

        if (this.list.length < this.pages.total) this.pages.page++;
        if (!this.pages.total) this.pages.nodata = true;
      }
    },
    onLoadList() {
      if (this.pages.nodata) return (this.listLoading = false);
      if (this.list.length == this.pages.total && this.pages.total > 0)
        return (this.listLoading = false);
      this.listLoading = true;
      this.getHttpNoticeList();
    },
  },
};
</script>
<style lang="less" scoped>
.btnList {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-bottom: 20px;
}
.message {
  .el-table {
    .el-button {
      background: #472d18 !important;
      color: #fff;
      border-radius: 15px;
      height: 20px;
      line-height: 0;
    }
  }
}
</style>
